import { isThrowStatement } from '@babel/types'
import React, {
  memo,
  useCallback,
  useEffect,
  useRef,
  useReducer,
  useLayoutEffect,
} from 'react'

import { createPortal } from 'react-dom'
import style from './index.module.less'

import usePortal from './usePortal'

const Portal = ({ id, children }) => {
  const target = usePortal(id)
  return createPortal(children, target)
}

function exchangeClassName(className, addClassName, type) {
  if (type === 'add') {
    return className.includes(addClassName)
      ? className
      : `${className} ${addClassName}`
  }
  if (type === 'del') {
    return className.replace(addClassName, '').trim()
  }
}

function PowerfulModal(props) {
  const { children, getContainer, visible, handleClose } = props
  const modalRef = useRef(null)

  const animationModal = useCallback(
    (type) => {
      if (!modalRef || !modalRef.current) {
        return
      }
      const dom = getContainer?.() || document.body
      const offsetWidth = dom.offsetWidth
      const offsetHeight = dom.offsetHeight
      console.log(offsetWidth, "offsetWidth")
      const info = dom.getBoundingClientRect()

      if (type) {
        modalRef.current.style.transition = 'none'
        modalRef.current.style.transformOrigin = `${
          info.x + offsetWidth / 2
        }px ${info.y + offsetHeight / 2}px`
      }

      setTimeout(() => {
        if (modalRef.current) {
          const styles = `
        transition: all 0.5s;
        transform-origin: ${
        type === 'open'
                  ? 'center'
                  : `${info.x + offsetWidth / 2}px ${info.y + offsetHeight / 2}px`
      };
        opacity: ${type === 'open' ? '1' : '0'};
        transform: ${type === 'open' ? 'scale(1)' : 'scale(0)'};
        `
          modalRef.current.style.cssText = styles
        }
      })
    },
    [getContainer]
  )

  useEffect(() => {
    const body = document.body
    const d = window.innerWidth - body.offsetWidth
    const cssText = body.style.cssText
    if (visible) {
      if (body.style.overflow !== 'hidden') {
        body.style.cssText = `${cssText};width:calc(100% - ${d}px); overflow: hidden;`
        body.className = exchangeClassName(body.className, 'powerful', 'add')
      }
      // animationModal("open")
    } else if (body.className.includes('powerful')) {
      body.style.cssText = cssText
        .split(';')
        .filter((item) => !item.includes('width') && !item.includes('overflow'))
        .join(';')
      body.className = exchangeClassName(body.className, 'powerful', 'del')
      // animationModal("close")
    }
  }, [visible])

  useLayoutEffect(() => {
    animationModal(visible ? 'open' : 'close')
  }, [animationModal, visible])

  const handleClick = (e) => {
    e.persist()
    if (e.target.className === style['zoom-chart-modal-flex']) {
      handleClose()
    }
  }

  return Portal({
    id: 'powerfulModal',
    children: (
      <div ref={modalRef} className={`${style['zoom-chart-modal']}`}>
        <div
          className={`${style['zoom-chart-modal-del']}`}
          onClick={handleClose}
        >
          <span className={`${style.downloadIconDel}`}>xxx</span>
        </div>
        <div
          className={`${style['zoom-chart-modal-flex']}`}
          onClick={handleClick}
        >
          {children}
        </div>
      </div>
    ),
  })
}

export default PowerfulModal
